<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小车控制台</title>
	<!-- jquery -->
	<script type="text/javascript" src="http://shzu.online/staticFile/static/js/jquery-2.1.4/jquery.min.js"></script>
	<!-- vuejs -->
	<script type="text/javascript" src="http://shzu.online/staticFile/static/js/Vue.js/vue.min.js"></script>
	
	<link rel="stylesheet" type="text/css" href="./css/style.css">

	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=qAKBOOYUdQZEuddhiGhldef6RQHmTl9x"></script>
</head>
<body>
	<div id="Controller">
		<div id="baiduMap"></div>
		<div class="console consoleInfo">
			<textarea class="consoleInfoText"  disabled="true" v-model="text">
				
			</textarea>
		</div>
		<div class="console consoleInput">
			<textarea class="consoleinputText"  v-model="input" placeholder="输入小车控制指令">
				
			</textarea>
			<button class="submitCommand" @click="submitCommand" >提交</button>
		</div>	
	</div>
</body>

<!-- 导入时间库 -->
<script type="text/javascript" src="./js/time.js"></script>

<script type="text/javascript" src="./js/entity/Car.js"></script>

<script type="text/javascript" src="./js/web/request.js"></script>

<script type="text/javascript" src="./js/web/modal.js"></script>

<script>
	var carManager = new Vue({
		data:{
			carMap:new Map()
		},
		methods:{
			insert:function(Car){
				this.carMap.set(Car.no,Car);
			},
			queryAll:function(){
				var cars=[];
				this.carMap.forEach(function (value, key, map) {
				    cars.push(value);
				})

				return cars;
			},
		}
	});


	var markManager = new Vue({
		data:{
			markMap:new Map(),
			moveFrequency:20, //决定点循环间隔
			moveFrequencyTime:50, //决定循环一次时间
			curentCarsMoved:[],
		},
		methods:{
			insert:function(car,baiduMap){
				var mark = this.markMap.get(car.no);
				var point = new BMap.Point(car.lon,car.lat);
				//如果点不存在，则新建
				if(mark==null) {
					mark = new BMap.Marker(point, {
					    enableDragging: true
					});

					this.markMap.set(car.no,mark);

					baiduMap.addOverlay(mark);
				}else{
					// 否则移动点
					this.move(baiduMap,car,point);
				}
				return mark;
			},
			queryAll:function(){
				var marks=[];
				this.markMap.forEach(function (value, key, map) {
				    marks.push(value);
				})
				return marks;
			},
			//移动车，将mark移动到newPoint
			move:function(baiduMap,car,newPoint){
console.log(0)
				if(this.curentCarsMoved.indexOf(car.no)>=0) return;//说明当前点正在移动，不可以再更新移动
console.log(1)
				var oldMark = this.markMap.get(car.no);
				if(oldMark==null) return;
console.log(2)
				var oldLng = oldMark.point.lng;
				var oldLat = oldMark.point.lat;
				var newLng = newPoint.lng;
				var newLat = newPoint.lat;

				if(oldLng==newLng&&oldLat==newLat) return; //位置不变，不需要移动
console.log(3)
				
				this.curentCarsMoved.push(car.no);//放入正在移动队列
				var subValueLng = (newLng - oldLng)/this.moveFrequency;
				var subValueLat = (newLat - oldLat)/this.moveFrequency;
				var curLng = oldLng;
				var curLat = oldLat;
 
				var moveFrequencyIndex=0;
				var end = setInterval(()=>{
					baiduMap.removeOverlay(oldMark);//删除旧点

					curLng = curLng + subValueLng;
					curLat = curLat + subValueLat;

					var curPoint = new BMap.Point(curLng,curLat);
					oldMark = new BMap.Marker(curPoint, {
					    enableDragging: true
					});
					baiduMap.addOverlay(oldMark);
					console.log("wow: "+" "+moveFrequencyIndex+" >? "+this.moveFrequency+" "+(moveFrequencyIndex>=this.moveFrequency));

					moveFrequencyIndex++;
					if(moveFrequencyIndex>=this.moveFrequency) {
						baiduMap.removeOverlay(oldMark);

						var newMark = new BMap.Marker(newPoint, {
						    enableDragging: true
						});
						baiduMap.addOverlay(newMark);
						this.markMap.set(car.no,newMark);

						//完成移动，移除当前移动
						var newCurentCarsMoved = [];
						var len = this.curentCarsMoved.length;
						for(var i=0;i<len;i++){
							if(car.no==this.curentCarsMoved[i]) continue;
							newCurentCarsMoved.push(this.curentCarsMoved[i]);
						}
						this.curentCarsMoved = newCurentCarsMoved;
console.log(4)
						clearInterval(end);
					}

				},this.moveFrequencyTime);
			}
		}
	});



	var Controller = new Vue({
		el:"#Controller",
		data:{
			text:"",
			input:"",
			map:null,
			mapConfig:{
				debug:true,
				center:new BMap.Point(86.064459,44.309719),
				zoom:17,
				enableScrollWheelZoom:true,
			},
			netConfig:{
				requestFrequency:2*1000,
			},
			carConfig:{
				index:["no", "lon", "lat", "v", "b"]
			}
		},
		methods:{
			init:function(){
				this.createBAIDUMap();
				this.updataCarInfo();
			},

			/**
				创建车辆信息
			**/
			createBAIDUMap:function(){
				var mapConfig = this.mapConfig;
				this.map = new BMap.Map("baiduMap");    // 创建Map实例

				this.map.centerAndZoom(mapConfig.center, mapConfig.zoom);  // 初始化地图,设置中心点坐标和地图级别

				//添加地图类型控件
				this.map.addControl(new BMap.MapTypeControl({
					mapTypes:[
			            BMAP_NORMAL_MAP,
			            BMAP_HYBRID_MAP
			        ]}));

				this.map.enableScrollWheelZoom(mapConfig.enableScrollWheelZoom);     //开启鼠标滚轮缩放

				if(mapConfig.debug){
					this.map.addEventListener("click",function(e){
						console.log("鼠标单击地方的经纬度为：",e.point.lng + "," + e.point.lat);
					});
				}
			},
			/**
				从服务器更新车辆信息
			**/
			updataCarInfo:function(){
				var netConfig = this.netConfig;
				var carConfig = this.carConfig;
				var that = this;
				setInterval(()=>{
					var data = queryAllCar();
					console.log(data);
					// console.log(data);
					data = data.data;
					for(var index in data){
						//插入车辆数据
						var car = that.createCar(data[index]);
						//记录小车信息
						carManager.insert(car);
						//记录小车标记信息
						markManager.insert(car,that.map);
					}
				},netConfig.requestFrequency);
			},
			/**
				将从server传过来的一辆car的json转为Car对象
			**/
			createCar:function(dataFromServer){
				var netConfig = this.netConfig;
				var carConfig = this.carConfig;

				var c = new Car();
				for(var j in carConfig.index){
					var carIndex = carConfig.index[j];
					c[carIndex] = dataFromServer[carIndex];
				}
				return c;
			},
			/**
				控制台命令显示
			**/
			insertCommandInfo:function(text){
				this.text = this.text + TimeTool.getTime() +"  "+ text + "\n";
			},
			/**
				控制台提交命令
				输入格式：
				testCar:left(10,10);up(10,10);stop(20,0);
			**/
			submitCommand:function(){
				var commands = this.input.split("&");
				this.insertCommandInfo("input:/> "+this.input);
				
				for(var i=0;i<commands.length;i++){
					var currentCommand = commands[i];
					var data = sendCommand(currentCommand);
					if(data.result==false){
						this.insertCommandInfo(data.msg+"  \""+data.data+"\"");
					}
				}
				this.input="";
			},
		}
	});
	Controller.init();
</script>
</html>